<template>
	<el-dialog title="导入用户" :visible.sync="visible" width="640px" top="0" append-to-body class="import_user_dialog">
		<div class="import_user_note">
			<div class="note">
				没有模板？
				<i class="el-icon-data-click">点击</i>
				<el-link type="primary" @click="handleDownTemplate()">下载模板</el-link>
			</div>
			<div class="note">
				查看导入失败数据？
				<i class="el-icon-data-click">点击</i>
				<el-link type="primary" :disabled="!isHasError" @click="handleDownError()">下载数据</el-link>
			</div>
		</div>
		<el-upload v-bind="uploadConfig" :headers="uploadHeader" :action="uploadAction">
			<el-progress v-bind="progressConfig" v-if="isProgress" :percentage="percentage" />
			<template v-if="!isUploadFile">
				<svg-icon icon-name="xls-icon" :size="56"></svg-icon>
				<div class="el-upload__text">
					{{ uploadFile.name }}
					<em>重新上传</em>
				</div>
			</template>
			<template v-else>
				<i class="el-icon-upload"></i>
				<div class="el-upload__text">
					将文件拖到此处，或
					<em>点击上传</em>
				</div>
			</template>
			<div class="el-upload__tip" slot="tip">只能上传xls文件，且不超过50MB</div>
		</el-upload>
		<template slot="footer">
			<el-button size="medium" @click="visible = false">取消</el-button>
			<el-button size="medium" type="primary" @click="visible = false">确定</el-button>
		</template>
	</el-dialog>
</template>

<script>
import lodash from 'lodash';
import { mapGetters } from 'vuex';
import { saveAs } from 'file-saver';
let baseUrl = process.env.VUE_APP_BASEURL;
export default {
	props: {
		value: { type: Boolean, default: false }
	},
	data() {
		return {
			visible: this.value,
			uploadAction: `${baseUrl}/tbSysUser/import`,
			uploadConfig: {
				limit: 1,
				drag: true,
				ref: 'upload',
				showFileList: false,
				accept: '.xls,.xlsx',
				class: 'import_user_upload',
				onSuccess: this.handleUploadSuccess,
				onProgress: this.handleUploadProgress,
				beforeUpload: this.handleBeforeUpload
			},
			percentage: 0,
			uploadFile: {},
			isHasError: false,
			isProgress: false,
			progressConfig: {
				strokeWidth: 2,
				showText: false
			},
			uploadErrorData: []
		};
	},
	computed: {
		...mapGetters(['token']),
		uploadHeader() {
			return {
				Authorization: this.token
			};
		},
		isUploadFile() {
			return lodash.isEmpty(this.uploadFile);
		}
	},
	watch: {
		value(flag) {
			this.visible = flag;
		},
		visible(flag) {
			this.$emit('input', flag);
		}
	},
	methods: {
		//下载导入模板
		handleDownTemplate() {
			window.location.href = `${baseUrl}/tbSysUser/down`;
		},

		//下载错误数据
		handleDownError() {
			if (this.uploadErrorData.length > 0) {
				let content = this.uploadErrorData.join('\n');
				let blob = new Blob([content], { type: 'text/plain;charset=utf-8' });
				saveAs(blob, '导入错误数据.txt');
			} else {
				this.$message.error('没有错误数据');
			}
		},

		//上传前文件
		handleBeforeUpload(file) {
			this.percentage = 0;
			this.isProgress = true;
			this.isHasError = false;
			this.uploadFile = { name: file.name };
			let size = file.size / 1024 / 1024;
			if (size > 50) {
				this.$message.error('文件大小不能超过50MB');
				return false;
			}
			return true;
		},

		//上传进度
		handleUploadProgress(event, file, fileList) {
			this.percentage = Math.floor(event.percent);
		},

		//上传完成
		handleUploadSuccess(response, file, fileList) {
			if (response.code === '0') {
				let result = this.$detailData(response.data);
				this.isHasError = parseInt(result.errorCount) > 0;
				this.uploadErrorData = result.errorData || [];
			} else {
				this.$message.error(response.msg);
			}
			setTimeout(() => {
				this.isProgress = false;
				this.$refs['upload'].clearFiles();
			}, 500);
		}
	}
};
</script>
<style lang="scss">
.import_user_dialog .el-dialog__body {
	padding: 20px;
	flex-direction: column;
}
</style>
<style lang="scss" scoped>
.import_user_note {
	display: flex;
	align-items: center;
	margin-bottom: 20px;
	.note {
		display: flex;
		align-items: center;
		margin-right: 48px;
		font-size: 15px;
	}
	.el-link {
		font-size: 15px;
	}
	i.el-icon-data-click::before {
		color: var(--primary);
		margin-right: 5px;
	}
}
.import_user_upload::v-deep {
	.el-upload {
		display: block;
	}
	.el-progress {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
	}
	.el-upload-dragger {
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: center;
		border-radius: 4px;
		width: 100%;
		.el-icon-upload {
			margin-top: 0;
		}
		svg.svg-icon {
			margin-bottom: 16px;
		}
	}
	.el-upload__tip {
		font-size: 14px;
		text-align: left;
	}
}
</style>
